<template>
  <nut-cell-group>
    <nut-cell>
      <nut-price
        :price="0"
        size="small"
        :need-symbol="true"
        :thousands="true"
      />
    </nut-cell>
    <nut-cell>
      <nut-price
        :price="0"
        :need-symbol="false"
        :decimal-digits="1"
        :thousands="false"
      />
    </nut-cell>
    <nut-cell>
      <nut-price
        :price="0"
        size="large"
        :need-symbol="true"
        :thousands="true"
      />
    </nut-cell>
  </nut-cell-group>
  <nut-cell>
    <nut-price
      :price="8888"
      :decimal-digits="0"
      size="normal"
      :need-symbol="true"
      :thousands="true"
    />
  </nut-cell>
  <nut-cell>
    <nut-price
      :price="10010.01"
      size="normal"
      :need-symbol="true"
      :thousands="false"
    />
  </nut-cell>
  <nut-cell>
    <nut-price
      :price="15213.1221"
      size="normal"
      :decimal-digits="3"
      :need-symbol="true"
      :thousands="true"
    />
  </nut-cell>
  <nut-cell>
    <nut-price
      :price="8888.01"
      position="after"
      symbol="元"
      size="normal"
      :need-symbol="true"
      :thousands="true"
    />
  </nut-cell>
  <nut-cell>
    <nut-price
      :price="price"
      size="normal"
      :decimal-digits="3"
      :need-symbol="true"
      :thousands="true"
    />
  </nut-cell>
</template>
<script setup lang="ts">
import { ref } from "vue";
const price = ref(0);
setInterval(() => {
  price.value = Math.random() * 10000000;
}, 1000);
</script>
<style></style>
